<template>
    <div class="bac">
        <div class="top">
            <div class="title">登录</div>
            <!-- 登录表单 -->
            <van-form @submit="onSubmit">
                <van-field v-model="formData.email" name="邮箱" placeholder="请输入邮箱" left-icon="/img/icon/email.png"
                    :rules="[{ required: true, message: '邮箱不能为空' }]" />
                <van-field v-model="formData.password" type="password" name="请输入密码" placeholder="密码" left-icon="/img/icon/pwd.png"
                    :rules="[{ required: true, message: '密码不能为空' }]" />
                <div style="margin: 16px;" class="btn">
                    <van-button round block type="primary" native-type="submit">登录</van-button>
                    <van-button round block type="primary" native-type="submit" @click="toRegister">注册</van-button>
                </div>
            </van-form>
        </div>
        <!-- 其他方式登录 -->
        <div class="other-login">
            <!-- 分割线 -->
            <van-divider style="margin: 1rem 0">其他登录方式</van-divider>
            <van-grid :gutter="0" :border="false">
                <van-grid-item icon="/img/icon/qq.png" />
                <van-grid-item icon="/img/icon/weibo.png" />
                <van-grid-item icon="/img/icon/chat.png" />
            </van-grid>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            formData: {
                email: '',
                password: '',
            }
        };
    },
    methods: {
        onSubmit(values) {
            this.http.post(this.$api.login,this.formData).then(res => {
                console.log(res);
                if(res.data.code == 200) {
                    sessionStorage.setItem('token', res?.data?.data?.token)
                    sessionStorage.setItem('user', JSON.stringify(res?.data?.data))
                    this.$msg.success(res.data.$msg)
                    this.$router.replace('/home')
                } else {
                    this.$msg.fail(res.data.$msg)
                }
            })
        },
        // 跳转注册
        toRegister() {
            this.$router.replace('/register')
        }
    },
}
</script>

<style lang="scss" scoped>
* {
    margin: 0;
    padding: 0;
}

.bac {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: url('/public/img/background/reg_bg.jpg');
    background-color: #f7f7f7;
    background-size: 100vw 24rem;
    background-repeat: no-repeat;

    .top {
        margin: 13rem auto 0;
        padding-top: 2rem;
        color: orange;
        width: 90%;
        background-color: white;
        border-radius: 1rem;

        .title {
            height: 5rem;
            font-size: 2rem;
            line-height: 40px;
        }

        .van-button {
            width: 80%;
            margin: 1rem auto;
        }

        .btn>.van-button:nth-child(1) {
            background-color: rgb(249, 200, 108);
            border: none;
        }

        .btn>.van-button:nth-child(2) {
            background-color: #ccc;
            border: none;
        }

        .van-cell {
            height: 5rem;
            display: flex;
            align-items: center;
        }

    }

    .other-login {
        width: 90%;
        margin: 3rem auto;

        .van-grid {
            width: 100%;

            justify-content: center;
            background-color: white;

        }
    }

}
</style>